<template>
  <ul class="mui-table-view">
    <li class="mui-table-view-cell mui-media" v-for="item in newList" :key="item.id">
      <!-- <router-link to=""></router-link> -->
      <router-link :to="'/home/newsinfo/'+item.id">
        <img class="mui-media-object mui-pull-left" :src="item.img_url">
        <div class="mui-media-body">
          <h3>{{item.title}}</h3>
          <p class="mui-ellipsis">
            <span class="pubtime">{{item.add_time|timeFormat('YYYY-MM-DD')}}</span>
            <span class="clicknum">点击:{{item.click}}次</span>
          </p>
        </div>
      </router-link>
    </li>
  </ul>
</template>
<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      newList: []
    };
  },
  methods: {
    getNewsList() {
      this.$http.get("api/getnewslist").then(function(res) {
        if (res.body.status !== 0) {
          return Toast("NewsList数据后台请求失败");
        }
        this.newList = res.body.message;
      });
    }
  },
  created() {
    this.getNewsList();
  }
};
</script>
<style lang="scss" scoped>
.mui-table-view {
  li.mui-table-view-cell {
    h3 {
      font-size: 14px;
    }
    p.mui-ellipsis {
      font-size: 12px;
      color: #226aff;
      display: flex;
      justify-content: space-between; //子内容两端分布
    }
  }
}
</style>
